<template>
	<view class="">
		<view class="loading-container">
			<!-- 循环渲染字母图片 -->
			<image :src="shalou" class="shalou" mode="aspectFit"></image>
			<view v-for="(char, index) in chars" :key="index" class="char-item"
				:style="{ animationDelay: `${index * 0.1}s` }">
				<image :src="char.url" class="bounce-rotate"
					:style="{ animationDelay: `${index * 0.1}s`,width:`${char.width}rpx`}" mode="widthFix" />
			</view>
			<view class="yuan" :style="{ animationDelay: `${7 * 0.1}s`}"></view>
			<view class="yuan" :style="{ animationDelay: `${8 * 0.1}s`}"></view>
			<view class="yuan" :style="{ animationDelay: `${9 * 0.1}s`}"></view>
		</view>
		<view class="loadingNum">
			图片生成第<text>{{nemNumber}}</text>位
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nemNumber: '200',
				shalou: require('@/components/waiting/static/shalou.png'),
				chars: [{
						url: require('@/components/waiting/static/w.png'),
						width: '20',
					},
					{
						url: require('@/components/waiting/static/a.png'),
						width: '12',
					},
					{
						url: require('@/components/waiting/static/i.png'),
						width: '6',
					},
					{
						url: require('@/components/waiting/static/t.png'),
						width: '12',
					},
					{
						url: require('@/components/waiting/static/i.png'),
						width: '6',
					},
					{
						url: require('@/components/waiting/static/n.png'),
						width: '12',
					},
					{
						url: require('@/components/waiting/static/g.png'),
						width: '10',
					},
				] // 字母数组
			}
		},
		created() {
			this.queuePosition();
		},
		methods:{
			// 获取用户队列
			queuePosition(){
				// 搜索类型,all=全部,shop=店铺,machine=机台
				this.$http('/v1/home/user-queue-position',{
					// keyword:
					type:'all'
				}).then(res=>{
					console.log(res,"获取用户队列");
					this.nemNumber=res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loading-container {
		@include flexLayout(flex-end, flex-start);
		margin-bottom: 8upx;
		padding-left: 16upx;
		.shalou {
			@include setwh(20upx, 32upx);
			margin-right: 12upx;
		}

		/* 根据实际需要调整 */
		.char-item {
			margin: 0 4upx;
			/* 字母间距 */
		}
		.yuan{
			background-color: #FEFEFE;
			border-radius: 50%;
			width: 6upx;
			height: 6upx;
			margin-right: 4upx;
			animation: bounceRotate 1.5s cubic-bezier(0.3, 0.7, 0.4, 0.9) infinite;
		}
		.bounce-rotate {
			// width: 20upx;
			/* 图片宽度 */
			height: 0;
			/* 图片高度 */
			display: block;
			will-change: transform;

			// animation: bounceRotate 1s ease-in-out infinite;
			animation: bounceRotate 1.5s cubic-bezier(0.3, 0.7, 0.4, 0.9) infinite;
		}
	}



	/* 关键帧动画 */
	@keyframes bounceRotate {

		0%,
		100% {
			transform: translateY(0) rotate(0deg);
		}

		25% {
			transform: translateY(-15px) rotate(10deg);
		}

		50% {
			transform: translateY(0) rotate(0deg);
		}

		75% {
			transform: translateY(-10px) rotate(-10deg);
		}
	}

	.loadingNum {
		width: 100%;
		height: 28rpx;
		background: #FEFEFE;
		font-family: QTxiaotu;
		font-weight: bold;
		font-size: 16rpx;
		color: #FF9999;
		// line-height: 28rpx;
		@include flexLayout(center, center);
		border-radius: 20upx;
		padding: 0 14upx;
		text{
			padding: 0 10upx;
		}
	}
</style>